<template>
	<view v-if="mode == 'color'">
		<c-picker-color ref="colorPicker" @confirm="confirmColor"></c-picker-color>
	</view>
	<!--日期选择器-->
	<view v-else-if="mode == 'date'">
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="DateChange">
			<slot>
				<view class="picker">
					{{date}}
				</view>
			</slot>
		</picker>
	</view>
	<!--地区选择器-->
	<view v-else-if="mode == 'region'">
		<picker mode="region" @change="RegionChange" :value="region">
			<view class="picker">
				{{region[0]}}，{{region[1]}}，{{region[2]}}
			</view>
		</picker>
	</view>
</template>
<script setup>
	const app = getApp();
	import {
		computed,
		reactive,
		ref,
		watch,
		onMounted,
		getCurrentInstance
	} from 'vue';
	const emit = defineEmits(['confirm', 'update:show']);
	const {
		proxy
	} = getCurrentInstance();
	const date = ref("2022-12-18");
	const region = ref(['广东省', '广州市', '海珠区'])
	const props = defineProps({
		mode: {
			type: String,
			// 日期 颜色 地区 etc...
			default: 'color',
		},
		show: {
			type: Boolean,
			default: false
		},
		//专属于日期选择器的参数
		startDate: {
			type: [String, Date],
			default: "2022-01-01",
		},
		endDate: {
			type: [String, Date],
			default: "2035-01-01"
		}
	});
	//PROPS 监听器
	watch(
		() => props.show,
		(newVal, oldVal) => {
			/* ... */
			pickerStatus();
		})
	// $refs vue3 写法
	const colorPicker = ref();
	onMounted(() => {
		// 选择器状态
		pickerStatus();
	})
	// picker status 
	function pickerStatus() {
		if (props.mode == 'color') {
			//console.log(colorPicker)
			if (props.show == true) {
				colorPicker.value.open();
			} else {
				colorPicker.value.close();
			}
		}
	}
	// date
	function DateChange(e) {
		date.value = e.detail.value
		emit('confirm', e.detail.value);
	}
	//region
	function RegionChange(e){
		region.value = e.detail.value;
		emit('confirm', e.detail.value);
	}
	// color
	uni.$on('color-picker-show', e => {
		emit('update:show', e);
	})
	//
	function confirmColor(e) {
		//console.log(e)
		emit('confirm', e)
	}
</script>
<style>
	@import "../../lib/main.css";
	@import "../../lib/icon.css";
	@import "../../lib/common.css";
</style>
